
<template>
  <a-card :bordered="false">
    <Header :title="'返回'" subTitle="管理现有模版" :hasBackPath="true" @headerBack="$router.back()"></Header>
    <a-form>
      <a-form-item label="模版名称">
        <a-input
          allowClear
          style="width: 300px;"
          v-model="queryParam.templateName"
          placeholder="请输入"
        />
        <a-button style="margin-left: 8px" @click="handleSearch">查询</a-button>
        <a-button type="primary" style="margin-left: 8px" @click="handleEdit(null)">创建新的模版</a-button>
      </a-form-item>
    </a-form>
    <s-table
      ref="table"
      size="default"
      :rowKey="record => record.id"
      :columns="columns"
      :data="loadData"
      :pagination="paginationProps"
    >
      <span slot="action" slot-scope="record">
        <a @click="handleEdit(record.id)">编辑</a>
        <a-divider type="vertical" />
        <a-popconfirm title="确认删除本条信息吗？" @confirm="handleDelet(record)">
          <a-icon slot="icon" type="question-circle-o" style="color: red" />
          <a href="javascript:;">删除</a>
        </a-popconfirm>
      </span>
    </s-table>
  </a-card>
</template>
<script>
  import { showPageList, showPageEdit } from '@/api/headquartersCoupon/index'
  import { STable } from '@/views/box/components'
  import Header from '@/views/box/components/layouts/Header'
  const columns = [
    {
      title: '序号',
      width: 100,
      align: 'center',
      customRender: (text,record,index) => `${index+1}`
    },
    {
      title: '模版名称',
      width: 150,
      align: 'center',
      dataIndex: 'templateName'
    },
    {
      title: '操作',
      width: 100,
      align: 'center',
      scopedSlots: { customRender: 'action' }
    }
  ]

  export default {
    components: {
      STable,
      Header
    },
    data() {
      return {
        queryParam: {},
        issueForm: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        visibleIssue: false,
        issueRules: {
          season: [{ required: true, message: '请选择', trigger: 'change' }],
          bumen: [{ required: true, message: '请选择', trigger: 'change' }],
          type: [{ required: true, message: '请选择', trigger: 'change' }],
        },
        columns,
        showImg: '',
        showVisible: false,
        logVisible: false,
        productDetails: {},

        // pageSize: 10,
        paginationProps: {
          total: 0,
          showTotal: total => `共有 ${total} 条数据`
          // onShowSizeChange: (current, pageSize) => this.changePageSize(current, pageSize)
        },
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          const data = {
            ...this.queryParam,
            current: parameter.pageNo,
            size: parameter.pageSize
          }
          return showPageList(data).then(res => {
            if (res.code === 200) {
              const { records, total, current, size, pages } = res.data
              return {
                page: {
                  count: total,
                  pageNo: current,
                  pageSize: size,
                  pages
                },
                data: records
              }
            } else {
              this.$message.error(res.msg || res.message)
              const data = {
                page: {
                  pageNo: 0
                },
                data: []
              }
              return data
            }
          })
        },
        selectedRowKeys: []
      }
    },
    created() {
    },
    computed: {
    },
    watch: {
    },
    mounted() {
    },
    methods: {
      // 
      handleEdit(id) {
        this.$router.push(`/headquarters-coupon/addAndEditTemplate/${id}`)
      },
      
      // 删除
      handleDelet(detail) {
        const data = {
          ...detail,
          status: -1
        }
        showPageEdit(data).then(res => {
          if (res.code == 200) {
            this.$refs.table.refresh()
          } else {
            this.$message.warning(res.msg || res.message)
          }
        })
      },

      handleIssue() {
        this.visibleIssue = true
      },

      handleIssueConfirm() {
        this.$refs.issueForm.validate(valid => {
          if (valid) {

          } else {
            return false
          }
        })
      },

      handleShowImg(url) {
        this.showImg = url
        this.showVisible = true
      },
      handleLog(id) {
        this.$refs.log.getLog(id, 'parent')
        this.logVisible=true
      },
      handleUpOrDown(type, ids) {
        const data = {
          requestData: {
            ids: [ids],
            type // :1上架，0下架
          }
        }
        upOrDown(data).then(res => {
          if (res.code == 0) {
            this.$refs.table.refresh()
          } else {
            this.$message.warning(res.msg || res.message)
          }
        })
      },
      handleMatchDelete(id){
        matchDelete(id).then(res => {
          if (res.code == 0) {
            this.$refs.table.refresh()
          } else {
            this.$message.warning(res.msg || res.message)
          }
        })
      },

      handleDetails(item) {
        const colorNo = item.substring(item.length-3)
        const productCode = item.substring(0, item.length-3)
        this.productDetails = {}
        this.visible = true
        const data = {
          requestData: {
            colorNo,
            productCode
          },
        }
        goodsSkcDetail(data).then(res => {
          if (res.code == 0) {
            this.productDetails = res.data
          } else {
            this.$message.warning(res.msg || res.message)
          }
        })
      },
      handleRecord() {
        this.$router.push(`/headquarters-coupon/record`)
      },
      onSelectChange(selectedRowKeys) {
        this.selectedRowKeys = selectedRowKeys
      },
      handleSearch() {
        this.$refs.table.refresh(true)
      },
      refreshList() {
        this.selectedRowKeys = []
        this.$refs.table.refresh()
      },
    }
  }
</script>
<style lang="less" scoped>
  .show-img{
    display: block;
    width: 100%;
  }
  .details-wrapper{
    display: flex;
    padding-bottom: 40px;
    .main-img{
      display: block;
      width: 40%;
    }
    .text{
      flex: 1;
      margin-left: 10%;
      line-height: 35px;
      font-size: 14px;
    }
  }
  .id-wrapper{
    font-size: 12px;
    text-align: center;
    span{
      color: #999;
    }
  }
  .product-img{
    font-size: 12px;
    .img-item{
      display: inline-block;
      vertical-align: middle;
      margin: 0 5px;
      text-align: center;
    }
  }
  .time{
    font-size: 12px;
    color: #999;
  }
  .img{
    display: block;
    margin: 2px auto;
    width: 60px;
    height: 60px;
    border: 1px dashed #f5f5f5;
    object-fit: scale-down;
    cursor: pointer;
  }
</style>
